<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个性标签</title>
     <style type="text/css">
          *{margin: 0;padding: 0;border: 0;list-style: none;}
          body{  background: #efefef;  padding:20px;}
         .all{overflow: hidden;margin: 20px 0;}
         .all li{ float: left;  height: 20px;  line-height: 20px;  padding: 0 20px;  border: 1px solid #ccc;  margin-right: 5px;  cursor: pointer;  }
         .person{  margin: 20px 0;  }
         .person li{ float: left; height: 20px;  line-height: 20px;  padding: 0 20px;  border: 1px solid #ccc;  margin-right: 5px;  cursor: pointer;  position: relative;  }
         .person li span{ width: 20px; height: 20px;  background: red;  float: right; text-align: center; color: #fff;  position: absolute; top:-3px; right:-3px;  display: none;}
     </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            $('.all li').click(function(){
                var value = $(this).html();
                var newData= $('<li>'+value+'<span>x</span></li>');
               $('.person').prepend(newData);
            });

            $('.person').on('click','li',function(){
                $(this).children().show();
            });
            $('.person').on('click','span',function(){
                $(this).parent()
                        .animate({left:-3},2)
                        .animate({left:3},2)
                        .animate({left:-3},2)
                        .animate({left:3},2)
                        .animate({left:-3},2)
                        .animate({left:3},2)
                        .animate({left:-3},2)
                        .animate({left:3},2)
                        .animate({left:-3},2)
                        .animate({left:3},2,function(){
                            $(this).remove();
                        })
            });
        });
    </script>
</head>
<body>
<h2>全部性格</h2>
<ul class="all">
    <li>开朗</li>
    <li>缅甸</li>
    <li>嘻哈</li>
    <li>复古</li>
    <li>潇洒</li>
    <li>风骚</li>
</ul>
<h2 >个人性格</h2>
<ul class="person">
    <!--<li>开朗<span>x</span></li>-->
    <!--<li>开朗<span>x</span></li>-->
</ul>
</body>
</html>